<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" type="text/css" href="./css/index.css" />
    <title>黔西南布依族苗族自治州检查检验互认共享平台</title>
    <!-- 引入 Flatpickr 样式 -->
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css"
    />
    <script src="./js/jquery-1.12.3.min.js"></script>
  </head>

  <body>
    <div class="max-box">
      <!-- 头部 -->
      <div class="top-box">
        <div class="top-content">
          黔西南布依族苗族自治州检查检验互认共享平台
        </div>
      </div>
      <!-- 内容区 -->
      <div class="content-box">
        <!-- 左边 -->
        <div class="content-left side-box">
          <!-- 卡片一 -->
          <div class="side-item left-item">
            <div class="module-title">
              <span class="title-text">对接信息</span>
            </div>
            <div class="module-li">
              <div class="li-parent li-parent-active">
                <div class="top">
                  <div class="left">
                    <p></p>
                    <p>医院信息</p>
                  </div>
                  <div class="center">
                    <div>
                      <p>25</p>
                      <p>医院总数</p>
                    </div>
                    <div>
                      <p>
                        <span>三级医院:</span>
                        <span>4</span>
                      </p>
                      <p>
                        <span>二级医院:</span>
                        <span>9</span>
                      </p>
                      <p>
                        <span>一级医院:</span>
                        <span>12</span>
                      </p>
                    </div>
                  </div>
                  <div class="right">
                    <p>
                      <span>62</span>
                      <span>%</span>
                    </p>
                    <p>二级以上覆盖率</p>
                  </div>
                </div>
                <div class="bottom">
                  <div class="left">
                    <p></p>
                    <p>插件信息</p>
                  </div>
                  <div class="center">
                    <div>
                      <p>19</p>
                      <p>部署数量</p>
                    </div>
                    <div>
                      <p>13</p>
                      <p>在线数量</p>
                    </div>
                  </div>
                  <div class="right">
                    <p></p>
                    <p onclick="viewDetails('1')">查看明细>></p>
                  </div>
                </div>
              </div>
              <div class="icon-left"></div>
              <div class="icon-right"></div>
            </div>
          </div>
          <!-- 卡片二 -->
          <div class="side-item left-item">
            <div class="module-title">
              <span class="title-text">报告上传超期（大于1日）监测</span>
            </div>
            <div class="module-li">
              <div class="li-title">
                <div
                  class="title-item"
                  style="
                    text-overflow: ellipsis;
                    overflow: hidden;
                    word-break: break-all;
                    white-space: nowrap;
                  "
                >
                  医疗机构
                </div>
                <div class="title-item">检验报告</div>
                <div class="title-item">检查报告</div>
              </div>
              <div class="li-parent li-parent-common" id="module2">
                <ul class="li-box" id="module2-show">
                  <li class="li-line">
                    <span class="li-item">黔西南州中医院</span>
                    <span class="li-item">100</span>
                    <span class="li-item">100</span>
                  </li>
                  <li class="li-line">
                    <span class="li-item">黔西南州中医院</span>
                    <span class="li-item">100</span>
                    <span class="li-item">100</span>
                  </li>
                  <li class="li-line">
                    <span class="li-item">黔西南州中医院</span>
                    <span class="li-item">100</span>
                    <span class="li-item">100</span>
                  </li>
                  <li class="li-line">
                    <span class="li-item">黔西南州中医院</span>
                    <span class="li-item">100</span>
                    <span class="li-item">100</span>
                  </li>
                  <li class="li-line">
                    <span class="li-item">黔西南州中医院</span>
                    <span class="li-item">100</span>
                    <span class="li-item">100</span>
                  </li>
                  <li class="li-line">
                    <span class="li-item">黔西南州中医院</span>
                    <span class="li-item">100</span>
                    <span class="li-item">100</span>
                  </li>
                  <li class="li-line">
                    <span class="li-item">黔西南州中医院</span>
                    <span class="li-item">100</span>
                    <span class="li-item">100</span>
                  </li>
                  <li class="li-line">
                    <span class="li-item">黔西南州中医院</span>
                    <span class="li-item">100</span>
                    <span class="li-item">100</span>
                  </li>
                  <li class="li-line">
                    <span class="li-item">黔西南州中医院</span>
                    <span class="li-item">100</span>
                    <span class="li-item">100</span>
                  </li>
                  <li class="li-line">
                    <span class="li-item">黔西南州中医院</span>
                    <span class="li-item">100</span>
                    <span class="li-item">100</span>
                  </li>
                </ul>
                <ul class="li-box" id="module2-hide"></ul>
              </div>
              <div class="icon-left"></div>
              <div class="icon-right"></div>
            </div>
          </div>
          <!-- 卡片三 -->
          <div class="side-item left-item">
            <div class="module-title">
              <span class="title-text">检查检验重复预警</span>
              <span class="subhead" onclick="viewDetails('2')">查看明细>></span>
            </div>
            <div class="module-li">
              <div class="li-title">
                <div
                  class="title-item"
                  style="
                    text-overflow: ellipsis;
                    overflow: hidden;
                    word-break: break-all;
                    white-space: nowrap;
                  "
                >
                  医疗机构
                </div>
                <div class="title-item">检测预警数</div>
                <div class="title-item">检查预警数</div>
              </div>
              <div class="li-parent li-parent-common" id="module3">
                <ul class="li-box" id="module3-show">
                  <li class="li-line">
                    <span class="li-item">黔西南州中医院</span>
                    <span class="li-item">100</span>
                    <span class="li-item">100</span>
                  </li>
                  <li class="li-line">
                    <span class="li-item">黔西南州中医院</span>
                    <span class="li-item">100</span>
                    <span class="li-item">100</span>
                  </li>
                  <li class="li-line">
                    <span class="li-item">黔西南州中医院</span>
                    <span class="li-item">100</span>
                    <span class="li-item">100</span>
                  </li>
                  <li class="li-line">
                    <span class="li-item">黔西南州中医院</span>
                    <span class="li-item">100</span>
                    <span class="li-item">100</span>
                  </li>
                  <li class="li-line">
                    <span class="li-item">黔西南州中医院</span>
                    <span class="li-item">100</span>
                    <span class="li-item">100</span>
                  </li>
                  <li class="li-line">
                    <span class="li-item">黔西南州中医院</span>
                    <span class="li-item">100</span>
                    <span class="li-item">100</span>
                  </li>
                  <li class="li-line">
                    <span class="li-item">黔西南州中医院</span>
                    <span class="li-item">100</span>
                    <span class="li-item">100</span>
                  </li>
                  <li class="li-line">
                    <span class="li-item">黔西南州中医院</span>
                    <span class="li-item">100</span>
                    <span class="li-item">100</span>
                  </li>
                  <li class="li-line">
                    <span class="li-item">黔西南州中医院</span>
                    <span class="li-item">100</span>
                    <span class="li-item">100</span>
                  </li>
                </ul>
                <ul class="li-box" id="module3-hide"></ul>
              </div>
              <div class="icon-left"></div>
              <div class="icon-right"></div>
            </div>
          </div>
        </div>

        <!-- 中间 -->
        <div class="content-center">
          <!-- 四个角 -->
          <div class="icon-one"></div>
          <div class="icon-two"></div>
          <div class="icon-three"></div>
          <div class="icon-four"></div>
          <!-- 上半部分 -->
          <div class="top">
            <div class="first">
              <!-- 左侧按钮组 -->
              <div class="btn-group">
                <button id="todayBtn">今日</button>
                <button id="weekBtn">本周</button>
                <button id="monthBtn">本月</button>
              </div>

              <!-- 右侧日期控件和查询按钮 -->
              <div class="right-group">
                <input
                  type="text"
                  id="dateRangePicker"
                  class="flatpickr-input"
                  placeholder=""
                  readonly
                />
                <button class="submit-btn" onclick="checkDateRange('')">
                  查询
                </button>
              </div>
            </div>
            <div class="second">
              <div>
                <p>数据统计</p>
                <p>5,737,424</p>
              </div>
              <div>
                <p>提醒次数</p>
                <p>5,737,424</p>
              </div>
              <div>
                <p>调阅次数</p>
                <p>5,737,424</p>
              </div>
              <div>
                <p>互认人次</p>
                <p>5,737,424</p>
              </div>
              <div>
                <p>节约费用</p>
                <p>5,737,424</p>
              </div>
            </div>
            <div class="third">
              <div class="map"></div>
              <div class="map-info">
                <p>兴仁市</p>
                <div class="info-table">
                  <div class="info-table-title">
                    <div class="title-item"></div>
                    <div class="title-item">检查</div>
                    <div class="title-item">检验</div>
                  </div>
                  <div class="info-table-content">
                    <div class="li-line">
                      <span class="li-item">报告数量</span>
                      <span class="li-item">100</span>
                      <span class="li-item">100</span>
                    </div>
                    <div class="li-line">
                      <span class="li-item">提醒次数</span>
                      <span class="li-item">100</span>
                      <span class="li-item">100</span>
                    </div>
                    <div class="li-line">
                      <span class="li-item">调阅次数</span>
                      <span class="li-item">100</span>
                      <span class="li-item">100</span>
                    </div>
                    <div class="li-line">
                      <span class="li-item">互认人次</span>
                      <span class="li-item">100</span>
                      <span class="li-item">100</span>
                    </div>
                    <div class="li-line">
                      <span class="li-item">节约费用</span>
                      <span class="li-item">100</span>
                      <span class="li-item">100</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- 下半部分 -->
          <div class="bottom">
            <div class="title">近一个月数据趋势</div>
            <div class="content" id="center-chart"></div>
          </div>
        </div>

        <!-- 右边 -->
        <div class="content-right side-box">
          <!-- 卡片一 -->
          <div class="side-item left-item">
            <div class="module-title">
              <span class="title-text">实时互认信息</span>
              <span class="subhead" onclick="viewDetails('3')">查看明细>></span>
            </div>
            <div class="module-li module-li-real-time">
              <div class="li-parent li-parent4" id="module4">
                <ul class="li-box" id="module4-show">
                  <li class="li-line">
                    <div class="li-left">
                      <p>
                        <span>王*东1</span>
                        <span>2024年10月11日 11:56:15</span>
                      </p>
                      <p>
                        <span>黔西南市人民医院</span>
                        <span>血细胞分析</span>
                      </p>
                    </div>
                    <div class="li-right"></div>
                  </li>
                  <li class="li-line">
                    <div class="li-left">
                      <p>
                        <span>王*东2</span>
                        <span>2024年10月11日 11:56:15</span>
                      </p>
                      <p>
                        <span>黔西南市人民医院</span>
                        <span>血细胞分析</span>
                      </p>
                    </div>
                    <div class="li-right"></div>
                  </li>
                  <li class="li-line">
                    <div class="li-left">
                      <p>
                        <span>王*东3</span>
                        <span>2024年10月11日 11:56:15</span>
                      </p>
                      <p>
                        <span>黔西南市人民医院</span>
                        <span>血细胞分析</span>
                      </p>
                    </div>
                    <div class="li-right"></div>
                  </li>
                  <li class="li-line">
                    <div class="li-left">
                      <p>
                        <span>王*东4</span>
                        <span>2024年10月11日 11:56:15</span>
                      </p>
                      <p>
                        <span>黔西南市人民医院</span>
                        <span>血细胞分析</span>
                      </p>
                    </div>
                    <div class="li-right"></div>
                  </li>
                  <li class="li-line">
                    <div class="li-left">
                      <p>
                        <span>王*东5</span>
                        <span>2024年10月11日 11:56:15</span>
                      </p>
                      <p>
                        <span>黔西南市人民医院</span>
                        <span>血细胞分析</span>
                      </p>
                    </div>
                    <div class="li-right"></div>
                  </li>
                  <li class="li-line">
                    <div class="li-left">
                      <p>
                        <span>王*东6</span>
                        <span>2024年10月11日 11:56:15</span>
                      </p>
                      <p>
                        <span>黔西南市人民医院</span>
                        <span>血细胞分析</span>
                      </p>
                    </div>
                    <div class="li-right"></div>
                  </li>
                  <li class="li-line">
                    <div class="li-left">
                      <p>
                        <span>王*东7</span>
                        <span>2024年10月11日 11:56:15</span>
                      </p>
                      <p>
                        <span>黔西南市人民医院</span>
                        <span>血细胞分析</span>
                      </p>
                    </div>
                    <div class="li-right"></div>
                  </li>
                  <li class="li-line">
                    <div class="li-left">
                      <p>
                        <span>王*东8</span>
                        <span>2024年10月11日 11:56:15</span>
                      </p>
                      <p>
                        <span>黔西南市人民医院</span>
                        <span>血细胞分析</span>
                      </p>
                    </div>
                    <div class="li-right"></div>
                  </li>
                  <li class="li-line">
                    <div class="li-left">
                      <p>
                        <span>王*东9</span>
                        <span>2024年10月11日 11:56:15</span>
                      </p>
                      <p>
                        <span>黔西南市人民医院</span>
                        <span>血细胞分析</span>
                      </p>
                    </div>
                    <div class="li-right"></div>
                  </li>
                  <li class="li-line">
                    <div class="li-left">
                      <p>
                        <span>王*东10</span>
                        <span>2024年10月11日 11:56:15</span>
                      </p>
                      <p>
                        <span>黔西南市人民医院</span>
                        <span>血细胞分析</span>
                      </p>
                    </div>
                    <div class="li-right"></div>
                  </li>
                </ul>
                <ul class="li-box" id="module4-hide"></ul>
              </div>
              <div class="icon-left"></div>
              <div class="icon-right"></div>
            </div>
          </div>

          <!-- 卡片二 -->
          <div class="side-item left-item">
            <div class="module-title">
              <span class="title-text">互认排名</span>
            </div>
            <div class="module-li module-li-mutual-recognition">
              <div class="li-parent" id="mutual-recognition"></div>
              <div class="icon-left"></div>
              <div class="icon-right"></div>
            </div>
          </div>

          <!-- 卡片三 -->
          <div class="side-item left-item">
            <div class="module-title">
              <span class="title-text">不互认原因排名</span>
            </div>
            <div class="module-li module-li-non-recognition">
              <div class="li-parent li-parent6" id="module6">
                <ul class="li-box" id="module6-show">
                  <li class="li-line">
                    <div class="li-left li-left-first">
                      <p>1</p>
                      <p>特殊情况有必要进一步复查特殊情况有必要进一步复查</p>
                    </div>
                    <div class="li-right">
                      <span class="li-right-span">983</span>
                      <span>次</span>
                    </div>
                  </li>
                  <li class="li-line">
                    <div class="li-left li-left-two">
                      <p>2</p>
                      <p>特殊情况有必要进一步复查</p>
                    </div>
                    <div class="li-right">
                      <span class="li-right-span">983</span>
                      <span>次</span>
                    </div>
                  </li>
                  <li class="li-line">
                    <div class="li-left li-left-three">
                      <p>3</p>
                      <p>特殊情况有必要进一步复查</p>
                    </div>
                    <div class="li-right">
                      <span class="li-right-span">983</span>
                      <span>次</span>
                    </div>
                  </li>
                  <li class="li-line">
                    <div class="li-left">
                      <p>4</p>
                      <p>特殊情况有必要进一步复查</p>
                    </div>
                    <div class="li-right">
                      <span>983</span>
                      <span>次</span>
                    </div>
                  </li>
                  <li class="li-line">
                    <div class="li-left">
                      <p>5</p>
                      <p>特殊情况有必要进一步复查</p>
                    </div>
                    <div class="li-right">
                      <span>983</span>
                      <span>次</span>
                    </div>
                  </li>
                  <li class="li-line">
                    <div class="li-left">
                      <p>6</p>
                      <p>特殊情况有必要进一步复查</p>
                    </div>
                    <div class="li-right">
                      <span>983</span>
                      <span>次</span>
                    </div>
                  </li>
                  <li class="li-line">
                    <div class="li-left">
                      <p>7</p>
                      <p>特殊情况有必要进一步复查</p>
                    </div>
                    <div class="li-right">
                      <span>983</span>
                      <span>次</span>
                    </div>
                  </li>
                  <li class="li-line">
                    <div class="li-left">
                      <p>8</p>
                      <p>特殊情况有必要进一步复查</p>
                    </div>
                    <div class="li-right">
                      <span>983</span>
                      <span>次</span>
                    </div>
                  </li>
                  <li class="li-line">
                    <div class="li-left">
                      <p>9</p>
                      <p>特殊情况有必要进一步复查</p>
                    </div>
                    <div class="li-right">
                      <span>983</span>
                      <span>次</span>
                    </div>
                  </li>
                  <li class="li-line">
                    <div class="li-left">
                      <p>10</p>
                      <p>特殊情况有必要进一步复查</p>
                    </div>
                    <div class="li-right">
                      <span>983</span>
                      <span>次</span>
                    </div>
                  </li>
                </ul>
                <ul class="li-box" id="module6-hide"></ul>
              </div>
              <div class="icon-left"></div>
              <div class="icon-right"></div>
            </div>
          </div>
        </div>
      </div>

      <!--弹框效果-->
      <div class="dialog-box">
        <div class="dialog-content">
          <div class="closeBtn" onclick="closeDialog()"></div>
          <div class="dialog-title">检查检验重复预警信息</div>
          <div class="serarch-area">
            <div class="filter-group">
              <span class="filter-label">统计日期：</span>
              <input
                id="dateRanges"
                class="flatpickr-input"
                placeholder=""
                readonly
              />
            </div>
            <div class="filter-group">
              <span class="filter-label">医疗机构：</span>
              <select id="hospital">
                <option value="">请选择</option>
                <option value="医院A">医院A</option>
                <option value="医院B">医院B</option>
              </select>
            </div>
            <div
              class="filter-group filter-group-category"
              style="display: none"
            >
              <span class="filter-label">类别：</span>
              <select id="category">
                <option value="">请选择</option>
                <option value="检查">检查</option>
                <option value="化验">化验</option>
              </select>
            </div>
            <div class="queryBtn" onclick="queryBtn()">查询</div>
            <div
              class="queryBtn exportBtn"
              style="margin-left: 15px; display: none"
              onclick="exportBtn()"
            >
              导出
            </div>
          </div>
          <div class="table-content">
            <!-- 表格部分 -->
            <table>
              <thead>
                <!-- 插件信息 -->
                <tr class="plugInformation" style="display: none">
                  <th>序号</th>
                  <th>医院名称</th>
                  <th>部署的工作站数</th>
                  <th>在线数</th>
                  <th>离线数</th>
                </tr>
                <!-- 实时互认信息 -->
                <tr class="mutualRecognitionInformation" style="display: none">
                  <th>序号</th>
                  <th>就诊医院</th>
                  <th>报告医院</th>
                  <th>患者姓名</th>
                  <th>身份证号码</th>
                  <th>类别</th>
                  <th>互认编码</th>
                  <th>互认项目</th>
                  <th>报告日期</th>
                  <th>互认时间</th>
                </tr>
                <!-- 检查检验重复预警 -->
                <tr class="earlyWarning" style="display: none">
                  <th>序号</th>
                  <th>就诊医院</th>
                  <th>患者姓名</th>
                  <th>身份证号</th>
                  <th>类别</th>
                  <th>检查/检验项目</th>
                  <th>报告时间</th>
                  <th>重复检查医院</th>
                  <th>重复检查/检验项目</th>
                  <th>报告时间</th>
                </tr>
              </thead>
              <tbody id="tableBody"></tbody>
            </table>
          </div>
          <!-- 分页组件部分 -->
          <div class="pagination">
            <button id="prevPage"></button>
            <div id="pageNumbers"></div>
            <button id="nextPage"></button>

            <div class="page-size">
              <select id="rowsPerPage">
                <option value="15" selected>15条/页</option>
                <option value="30">30条/页</option>
                <option value="45">45条/页</option>
                <option value="60">60条/页</option>
              </select>
            </div>

            <div class="page-jump">
              前往
              <input id="jumpPage" type="text" min="1" />
              页
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 滚动函数 -->
    <script type="text/javascript">
      (function ($) {
        $.fn.myScroll = function (options) {
          var opts = $.extend({}, options),
            intId = [];
          function marquee(obj, step) {
            obj.find("ul").animate(
              {
                marginTop: "-=1",
              },
              0,
              function () {
                var s = Math.abs(parseInt($(this).css("margin-top")));
                if (s >= step) {
                  $(this).find("li").slice(0, 1).appendTo($(this));
                  $(this).css("margin-top", 0);
                }
              }
            );
          }
          this.each(function (i) {
            var sh = opts["rowHeight"],
              speed = opts["speed"],
              _this = $(this);
            intId[i] = setInterval(function () {
              if (_this.find("ul").height() <= _this.height()) {
                clearInterval(intId[i]);
              } else {
                marquee(_this, sh);
              }
            }, speed);
            _this.hover(
              function () {
                clearInterval(intId[i]);
              },
              function () {
                intId[i] = setInterval(function () {
                  if (_this.find("ul").height() <= _this.height()) {
                    clearInterval(intId[i]);
                  } else {
                    marquee(_this, sh);
                  }
                }, speed);
              }
            );
          });
        };
      })(jQuery);
    </script>
  </body>
</html>
<script src="./js/echarts.js"></script>
<!-- 引入 Flatpickr 主库 -->
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<!-- 引入中文语言包 -->
<script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/zh.js"></script>
<script>
  var clientWidth = document.documentElement.scrollWidth; //获取屏幕尺寸
  var scale = clientWidth / 1920; //缩放比例
  // 获取今天的日期对象
  const todayDate = new Date();
  let flag = "";
  let datas = [];
  let currentPage = 1;
  let rowsPerPage = 15;
  let total = 0;

  // 滚动列执行
  $(document).ready(function () {
    $("div.li-parent-common").myScroll({
      //数值越大，速度越慢
      speed: 60,
      // 行高
      rowHeight: 38,
    });
    $("div.li-parent4").myScroll({
      //数值越大，速度越慢
      speed: 121,
      // 行高
      rowHeight: 77,
    });
    $("div.li-parent6").myScroll({
      //数值越大，速度越慢
      speed: 94,
      // 行高
      rowHeight: 47,
    });
  });

  /**
   * 界面缩放
   */
  $(window).resize(function () {
    setTimeout(() => {
      var centerChart = echarts.getInstanceByDom(
        document.getElementById("center-chart")
      );
      var mutualRecognition = echarts.getInstanceByDom(
        document.getElementById("mutual-recognition")
      );
      centerChart.resize();
      mutualRecognition.resize();
    }, 100);
  });

  /**
   * 日期初始化和选择
   */

  // 初始化 Flatpickr 日期范围选择器
  const fp = flatpickr("#dateRangePicker", {
    mode: "range", // 选择日期范围
    dateFormat: "Y-m-d", // 日期格式
    locale: "zh", // 设置语言为中文
    static: true, // 固定日期选择器位置
    maxDate: getToday(), // 设置最大日期为今天，禁止选择今天之后的日期
    defaultDate: [todayDate, todayDate], // 默认选择今天
    onChange: function (selectedDates, dateStr, instance) {
      if (selectedDates.length === 2) {
        // 同步更新 dateRanges 控件的日期
        const startDate = formatDate(selectedDates[0]);
        const endDate = formatDate(selectedDates[1]);
        instance.input.value = startDate + "至" + endDate;
      } else if (selectedDates.length === 1) {
        // 如果只选择了一个日期
        const singleDateStr = formatDate(selectedDates[0]);
        instance.input.value = singleDateStr + "至" + singleDateStr;
      }
    },
  });

  // 获取今天的日期
  function getToday() {
    const today = new Date();
    const yyyy = today.getFullYear();
    const mm = String(today.getMonth() + 1).padStart(2, "0");
    const dd = String(today.getDate()).padStart(2, "0");
    return yyyy + "-" + mm + "-" + dd;
  }

  // 获取本周的开始和结束日期，不超过今天
  function getThisWeek() {
    const today = new Date();
    const day = today.getDay(); // 获取今天是星期几
    const diffToMonday = day === 0 ? -6 : 1 - day; // 如果是星期天，差值是 -6；否则是 1 - day
    const monday = new Date(today);
    monday.setDate(today.getDate() + diffToMonday);
    let sunday = new Date(monday);
    sunday.setDate(monday.getDate() + 6);

    // 如果结束日期大于今天，设置为今天
    if (sunday > today) {
      sunday = today;
    }

    return {
      start: formatDate(monday),
      end: formatDate(sunday),
    };
  }

  // 获取本月的开始和结束日期，不超过今天
  function getThisMonth() {
    const today = new Date();
    const yyyy = today.getFullYear();
    const mm = String(today.getMonth() + 1).padStart(2, "0");
    const firstDay = yyyy + "-" + mm + "-01";
    let lastDay = new Date(yyyy, today.getMonth() + 1, 0); // 获取本月最后一天

    // 如果结束日期大于今天，设置为今天
    if (lastDay > today) {
      lastDay = today;
    }

    return {
      start: firstDay,
      end: formatDate(lastDay),
    };
  }

  // 格式化日期为 Y-m-d
  function formatDate(date) {
    const yyyy = date.getFullYear();
    const mm = String(date.getMonth() + 1).padStart(2, "0");
    const dd = String(date.getDate()).padStart(2, "0");
    return yyyy + "-" + mm + "-" + dd;
  }

  // 更新按钮的选中状态
  function setActiveButton(buttonId) {
    document.getElementById("todayBtn").classList.remove("active");
    document.getElementById("weekBtn").classList.remove("active");
    document.getElementById("monthBtn").classList.remove("active");
    if (buttonId) {
      document.getElementById(buttonId).classList.add("active");
    }
  }

  // 按钮点击事件绑定
  document.getElementById("todayBtn").addEventListener("click", () => {
    const today = getToday();
    fp.setDate([today, today], true); // 设置 Flatpickr 控件的日期为今天
    setActiveButton("todayBtn");
    checkDateRange("todayBtn");
  });

  document.getElementById("weekBtn").addEventListener("click", () => {
    const week = getThisWeek();
    fp.setDate([week.start, week.end], true); // 设置 Flatpickr 控件的日期为本周
    setActiveButton("weekBtn");
    checkDateRange("weekBtn");
  });

  document.getElementById("monthBtn").addEventListener("click", () => {
    const month = getThisMonth();
    fp.setDate([month.start, month.end], true); // 设置 Flatpickr 控件的日期为本月
    setActiveButton("monthBtn");
    checkDateRange("monthBtn");
  });

  // 检查选择的日期范围并根据范围设置按钮选中效果
  function checkDateRange(sign) {
    const dateRange = fp.selectedDates;
    if (dateRange.length === 2) {
      const startDate = formatDate(dateRange[0]);
      const endDate = formatDate(dateRange[1]);

      const today = getToday();
      const week = getThisWeek();
      const month = getThisMonth();
      if (sign == "") {
        setActiveButton(null);
      }
      document.getElementById("dateRanges").value = startDate + "至" + endDate;
    } else {
      document.getElementById("output").innerText = "请选择一个日期范围。";
      setActiveButton(null); // 取消选中所有按钮
    }
  }

  // 页面加载时默认选中今日
  document.addEventListener("DOMContentLoaded", () => {
    const today = getToday();
    fp.setDate([today, today], true); // 设置 Flatpickr 控件的日期为今天
    setActiveButton("todayBtn"); // 设置今日按钮为激活状态
    checkDateRange("todayBtn");
  });

  /**
   * 关闭弹框
   */
  function closeDialog() {
    currentPage = 1;
    rowsPerPage = 15;
    var selectElement = document.getElementById("rowsPerPage");
    var defaultOption = selectElement.querySelector('option[value="15"]');
    defaultOption.selected = true;
    document.getElementById("hospital").value = "";
    document.getElementById("category").value = "";
    let dialog = document.getElementsByClassName("dialog-box")[0];
    dialog.style.display = "none";
  }

  /**
   * 打开明细弹框 1:插件信息 2：检验检查重复预警 3：实时互认信息
   */
  function viewDetails(query) {
    flag = query;
    let dialog = document.getElementsByClassName("dialog-box")[0];
    dialog.style.display = "flex";
    if (query == "1") {
      document.querySelector(".filter-group-category").style.display = "none";
      document.querySelector(".exportBtn").style.display = "block";
      document.querySelector(".dialog-title").innerText = "插件信息";
      document.querySelector(".plugInformation").style.display = "table";
      document.querySelector(".earlyWarning").style.display = "none";
      document.querySelector(".mutualRecognitionInformation").style.display =
        "none";
    } else if (query == "2") {
      document.querySelector(".filter-group-category").style.display = "block";
      document.querySelector(".exportBtn").style.display = "block";
      document.querySelector(".dialog-title").innerText =
        "检查检验重复预警信息";
      document.querySelector(".plugInformation").style.display = "none";
      document.querySelector(".earlyWarning").style.display = "table";
      document.querySelector(".mutualRecognitionInformation").style.display =
        "none";
    } else if (query == "3") {
      document.querySelector(".filter-group-category").style.display = "block";
      document.querySelector(".exportBtn").style.display = "block";
      document.querySelector(".dialog-title").innerText = "实时互认信息";
      document.querySelector(".plugInformation").style.display = "none";
      document.querySelector(".earlyWarning").style.display = "none";
      document.querySelector(".mutualRecognitionInformation").style.display =
        "table";
    } else {
    }
    // 初始化显示第一页
    displayTable(currentPage, flag);
  }

  /**
   * 弹框内的查询
   */

  function queryBtn() {
    displayTable(1, flag);
  }

  /**
   * 弹框内的导出
   */

  function exportBtn() {
    let exportObj = {
      date: document.getElementById("dateRanges").value, // 日期
      org: document.getElementById("hospital").value, // 医疗机构
      cate: document.getElementById("category").value, // 类别
    };
    console.log(
      exportObj,
      "-----------------------导出传参对象---------------------"
    );
    if (flag == "1") {
      // 调用插件信息导出接口
    } else if (flag == "3") {
      // 调用实时互认信息导出接口
    } else {
    }
  }

  /**
   * 近一月数据趋势柱状图
   */
  function initCenterChart(
    nameData,
    rightDataPageOne,
    rightDataPageTwo,
    rightDataPageThree,
    rightDataPageFour,
    rightDataPageFive
  ) {
    // 销毁已有实例
    if (
      echarts.getInstanceByDom(document.getElementById("center-chart")) !== null
    ) {
      echarts.dispose(document.getElementById("center-chart"));
    }
    var centerChart = echarts.init(document.getElementById("center-chart"));
    var centerChartOption = {
      tooltip: {
        trigger: "axis",
        backgroundColor: "rgba(24, 57, 134, .9)",
        borderColor: "#F6FCFF",
        transitionDuration: 0,
        textStyle: {
          color: "#BCCAFE",
        },
        axisPointer: {
          type: "shadow",
        },
      },
      legend: {
        data: ["报告数量", "提醒次数", "调阅次数", "互认人次", "节约费用"],
        itemWidth: 16 * scale,
        itemHeight: 6 * scale,
        itemGap: 20,
        top: "2%",
        textStyle: {
          color: "#FFFFFF",
          fontSize: 14 * scale,
        },
      },
      grid: {
        top: "15%",
        left: "3%",
        right: "5%",
        bottom: "10%",
        containLabel: true,
      },
      xAxis: [
        {
          type: "category",
          axisTick: {
            show: false,
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#2A4651",
            },
          },
          splitLine: {
            show: false,
          },
          axisLabel: {
            show: true,
            color: "#FFFFFF",
          },
          data: nameData,
        },
      ],
      yAxis: {
        type: "value",
        name: "单位：万人",
        nameTextStyle: {
          color: "#FFFFFF",
          fontSize: 14 * scale,
        },
        axisLabel: {
          show: true,
          color: "#FFFFFF",
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: "#2A4651",
            type: "dashed",
          },
        },
        boundaryGap: [0, 0.01],
      },
      series: [
        {
          name: "报告数量",
          type: "bar",
          color: "#2D9FFF",
          barWidth: 8 * scale, //柱子的宽度
          itemStyle: {
            barBorderRadius: [4, 4, 0, 0],
          },
          data: rightDataPageOne,
        },
        {
          name: "提醒次数",
          type: "bar",
          color: "#43EA80",
          barWidth: 8 * scale, //柱子的宽度
          itemStyle: {
            barBorderRadius: [4, 4, 0, 0],
          },
          data: rightDataPageTwo,
        },
        {
          name: "调阅次数",
          type: "bar",
          color: "#FFAF38",
          barWidth: 8 * scale, //柱子的宽度
          itemStyle: {
            barBorderRadius: [4, 4, 0, 0],
          },
          data: rightDataPageThree,
        },
        {
          name: "互认人次",
          type: "bar",
          color: "#F2867A",
          barWidth: 8 * scale, //柱子的宽度
          itemStyle: {
            barBorderRadius: [4, 4, 0, 0],
          },
          data: rightDataPageFour,
        },
        {
          name: "节约费用",
          type: "bar",
          color: "#26D9E1",
          barWidth: 8 * scale, //柱子的宽度
          itemStyle: {
            barBorderRadius: [4, 4, 0, 0],
          },
          data: rightDataPageFive,
        },
      ],
    };
    centerChart.setOption(centerChartOption);
  }

  /**
   * 近一月数据趋势定时轮播
   * 逻辑：按照原型图展示9条数据 逻辑已经写好 只要数据处理成allRightData这种格式就行
   */

  var allRightData = [
    {
      name: "10-01",
      count: [2000, 5000, 8000, 11000, 14000],
    },
    {
      name: "10-02",
      count: [2000, 5000, 8000, 11000, 14000],
    },
    {
      name: "10-03",
      count: [2000, 5000, 8000, 11000, 14000],
    },
    {
      name: "10-04",
      count: [2000, 5000, 8000, 11000, 14000],
    },
    {
      name: "10-05",
      count: [2000, 5000, 8000, 11000, 14000],
    },
    {
      name: "10-06",
      count: [2000, 5000, 8000, 11000, 14000],
    },
    {
      name: "10-07",
      count: [2000, 5000, 8000, 11000, 14000],
    },
    {
      name: "10-08",
      count: [2000, 5000, 8000, 11000, 14000],
    },
    {
      name: "10-09",
      count: [2000, 5000, 8000, 11000, 14000],
    },
    {
      name: "10-10",
      count: [2000, 5000, 8000, 11000, 14000],
    },
    {
      name: "10-11",
      count: [2000, 5000, 8000, 11000, 14000],
    },
    {
      name: "10-12",
      count: [2000, 5000, 8000, 11000, 14000],
    },
    {
      name: "10-13",
      count: [2000, 5000, 8000, 11000, 14000],
    },
    {
      name: "10-14",
      count: [2000, 5000, 8000, 11000, 14000],
    },
    {
      name: "10-15",
      count: [2000, 5000, 8000, 11000, 14000],
    },
    {
      name: "10-16",
      count: [2000, 5000, 8000, 11000, 14000],
    },
    {
      name: "10-17",
      count: [2000, 5000, 8000, 11000, 14000],
    },
    {
      name: "10-18",
      count: [2000, 5000, 8000, 11000, 14000],
    },
    {
      name: "10-19",
      count: [2000, 5000, 8000, 11000, 14000],
    },
    {
      name: "10-20",
      count: [2000, 5000, 8000, 11000, 14000],
    },
    {
      name: "10-21",
      count: [2000, 5000, 8000, 11000, 14000],
    },
    {
      name: "10-22",
      count: [2000, 5000, 8000, 11000, 14000],
    },
    {
      name: "10-23",
      count: [2000, 5000, 8000, 11000, 14000],
    },
    {
      name: "10-24",
      count: [2000, 5000, 8000, 11000, 14000],
    },
    {
      name: "10-25",
      count: [2000, 5000, 8000, 11000, 14000],
    },
    {
      name: "10-26",
      count: [2000, 5000, 8000, 11000, 14000],
    },
    {
      name: "10-27",
      count: [2000, 5000, 8000, 11000, 14000],
    },
    {
      name: "10-28",
      count: [2000, 5000, 8000, 11000, 14000],
    },
    {
      name: "10-29",
      count: [2000, 5000, 8000, 11000, 14000],
    },
    {
      name: "10-30",
      count: [2000, 5000, 8000, 11000, 14000],
    },
    {
      name: "10-31",
      count: [2000, 5000, 8000, 11000, 14000],
    },
  ];
  var pageNumR = 1;
  var pageSzieR = 9;
  var totalNumR = allRightData.length;
  var computedNumR = Math.ceil(totalNumR / pageSzieR);
  var RightNameAndData = [];
  var rightNamePage = [];
  var rightDataPageOne = [];
  var rightDataPageTwo = [];
  var rightDataPageThree = [];
  var rightDataPageFour = [];
  var rightDataPageFive = [];
  RightNameAndData = allRightData.slice(0, pageSzieR);
  rightNamePage = RightNameAndData.map((v, i) => {
    return v.name;
  });
  rightDataPageOne = RightNameAndData.map((v, i) => {
    return v.count[0];
  });
  rightDataPageTwo = RightNameAndData.map((v, i) => {
    return v.count[1];
  });
  rightDataPageThree = RightNameAndData.map((v, i) => {
    return v.count[2];
  });
  rightDataPageFour = RightNameAndData.map((v, i) => {
    return v.count[3];
  });
  rightDataPageFive = RightNameAndData.map((v, i) => {
    return v.count[4];
  });
  initCenterChart(
    rightNamePage,
    rightDataPageOne,
    rightDataPageTwo,
    rightDataPageThree,
    rightDataPageFour,
    rightDataPageFive
  );

  if (totalNumR > 6) {
    clearInterval(RightInterval);
    var RightInterval = setInterval(() => {
      pageNumR++;
      if (pageNumR == computedNumR) {
        RightNameAndData = allRightData.slice(
          (pageNumR - 1) * pageSzieR,
          totalNumR
        );
        rightNamePage = RightNameAndData.map((v, i) => {
          return v.name;
        });
        rightDataPageOne = RightNameAndData.map((v, i) => {
          return v.count[0];
        });
        rightDataPageTwo = RightNameAndData.map((v, i) => {
          return v.count[1];
        });
        rightDataPageThree = RightNameAndData.map((v, i) => {
          return v.count[2];
        });
        rightDataPageFour = RightNameAndData.map((v, i) => {
          return v.count[3];
        });
        rightDataPageFive = RightNameAndData.map((v, i) => {
          return v.count[4];
        });
        pageNumR = 0;
      } else {
        RightNameAndData = allRightData.slice(
          (pageNumR - 1) * pageSzieR,
          pageNumR * pageSzieR
        );
        rightNamePage = RightNameAndData.map((v, i) => {
          return v.name;
        });
        rightDataPageOne = RightNameAndData.map((v, i) => {
          return v.count[0];
        });
        rightDataPageTwo = RightNameAndData.map((v, i) => {
          return v.count[1];
        });
        rightDataPageThree = RightNameAndData.map((v, i) => {
          return v.count[2];
        });
        rightDataPageFour = RightNameAndData.map((v, i) => {
          return v.count[3];
        });
        rightDataPageFive = RightNameAndData.map((v, i) => {
          return v.count[4];
        });
      }

      initCenterChart(
        rightNamePage,
        rightDataPageOne,
        rightDataPageTwo,
        rightDataPageThree,
        rightDataPageFour,
        rightDataPageFive
      );
    }, 5000);
  }

  /**
   * 互认排名
   */
  function initMutualRecognition() {
    const data = {
      label: [
        "兴义市人民医院",
        "黔西南州人民医院",
        "黔西南州中医院",
        "兴仁市人民医院",
        "兴义市人民二院",
        "六安市人民医院",
        "合肥市人民医院",
        "芜湖市人民医院",
        "蚌埠市人民医院",
        "滁州市人民医院",
        "苏州市人民医院",
        "南京市人民医院",
      ],
      value: [
        6613, 3115, 1123, 968, 613, 568, 778, 989, 1059, 2155, 3200, 4399,
      ],
      amout: [
        6613, 3115, 1123, 968, 613, 568, 778, 989, 1059, 2155, 3200, 4399,
      ],
    };
    let dataZoomMove = {
      start: 0,
      end: 4,
    };
    let colorList = ["#F2867A", "#FFAF38", "#43EA80", "#2D9FFF", "#26D9E1"];
    let dataZoomMoveTimer = null;
    if (
      echarts.getInstanceByDom(
        document.getElementById("mutual-recognition")
      ) !== null
    ) {
      echarts.dispose(document.getElementById("mutual-recognition"));
    }
    var mutualRecognitionChart = echarts.init(
      document.getElementById("mutual-recognition")
    );
    var mutualRecognitionOption = {
      tooltip: {
        trigger: "axis",
        backgroundColor: "rgba(24, 57, 134, .9)",
        textStyle: {
          color: "#BCCAFE",
        },
        borderColor: "#159AFF",
        axisPointer: {
          lineStyle: {
            color: "transparent",
          },
        },
        formatter: function (params) {
          const index = params[0].dataIndex; // 获取当前柱子的索引
          const count = data.value[index]; // 获取次数
          const amount = data.amout[index]; // 获取金额
          const countColor = params[0].color; // 获取柱子的颜色

          // 使用字符串拼接返回格式化的字符串
          return (
            params[0].name +
            "<br/>" +
            '<span style="display:inline-block;width:10px;height:10px;background-color:' +
            countColor +
            ';border-radius:50%;margin-right:5px;"></span>' +
            count +
            " 次<br/>" +
            '<span style="display:inline-block;width:10px;height:10px;background-color:' +
            countColor +
            ';border-radius:50%;margin-right:5px;"></span>' +
            amount +
            " 元"
          );
        },
      },
      dataZoom: [
        {
          show: false, // 为true 滚动条出现
          startValue: dataZoomMove.start,
          endValue: dataZoomMove.end,
          yAxisIndex: [0, 1], //关联多个y轴
        },
        {
          //没有下面这块的话，只能拖动滚动条，鼠标滚轮在区域内不能控制外部滚动条
          type: "inside",
          yAxisIndex: 0,
          zoomOnMouseWheel: false, //滚轮是否触发缩放
          moveOnMouseMove: true, //鼠标滚轮触发滚动
          moveOnMouseWheel: true,
        },
      ],
      grid: {
        containLabel: true,
        bottom: "-8%",
        left: "2%",
        top: "10%",
        right: "2%",
      },
      xAxis: {
        type: "value",
        axisLabel: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          show: false,
        },
      },
      yAxis: [
        {
          type: "category",
          data: data.label,
          inverse: true,
          axisLabel: {
            inside: true,
            verticalAlign: "bottom",
            lineHeight: 36 * scale,
            margin: 2 * scale, //刻度标签与轴线之间的距离
            formatter: function (value) {
              let k = data.label.indexOf(value);
              let index = k + 1;
              if (index == "1") {
                return "{one|" + index + "} {a|" + value + "}";
              } else if (index == "2") {
                return "{two|" + index + "} {a|" + value + "}";
              } else if (index == "3") {
                return "{three|" + index + "} {a|" + value + "}";
              }
              if (index < 10) {
                return "{four|" + index + "} {a|" + value + "}";
              }
              return "{five|" + index + "} {a|" + value + "}";
            },
            rich: {
              b: {
                borderColor: "#000",
                borderWidth: 1,
                padding: [3, 1, 0, 1],
                color: "#000",
                fontSize: 12 * scale,
              },
              a: {
                fontSize: 12 * scale,
                color: "#fff",
                padding: [4, 0, 0, 8],
              },
              // 第一名
              one: {
                backgroundColor: {
                  image: "./imgs/one_red.png",
                },
                color: "white",
                width: 23 * scale,
                height: 23 * scale,
                fontSize: 14 * scale,
                padding: [0, -5 * scale, 0, 8 * scale],
              },
              // 第二名
              two: {
                backgroundColor: {
                  image: "./imgs/two_yellow.png",
                },
                color: "white",
                width: 23 * scale,
                height: 23 * scale,
                fontSize: 14 * scale,
                padding: [0, -5 * scale, 0, 8 * scale],
              },
              // 第三名
              three: {
                backgroundColor: {
                  image: "./imgs/three_green.png",
                },
                color: "white",
                width: 23 * scale,
                height: 23 * scale,
                fontSize: 14 * scale,
                padding: [0, -5 * scale, 0, 8 * scale],
              },
              // 一位数
              four: {
                backgroundColor: {
                  image: "./imgs/other_blue.png",
                },
                color: "white",
                width: 23 * scale,
                height: 23 * scale,
                fontSize: 14 * scale,
                padding: [0, -5 * scale, 0, 8 * scale],
              },
              // 两位数
              five: {
                backgroundColor: {
                  image: "./imgs/other_blue.png",
                },
                color: "white",
                width: 23 * scale,
                height: 23 * scale,
                fontSize: 14 * scale,
                padding: [0, 0 * scale, 2 * scale, 5 * scale],
              },
            },
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: false,
          },
        },
        {
          type: "category",
          data: data.label,
          inverse: true,
          axisLabel: {
            inside: true,
            verticalAlign: "bottom",
            lineHeight: 34 * scale,
            margin: 2 * scale,
            formatter: function (value) {
              let k = data.label.indexOf(value);
              let index = k;
              return (
                "{a|" +
                data.value[index] +
                "}{b|次}{a|" +
                data.amout[index] +
                "}{c|元}"
              );
            },
            rich: {
              a: {
                fontSize: 16 * scale,
                color: "#44C1EF",
                padding: [4 * scale, 0, 0, 0],
                fontFamily: "DOUYU",
                width: 100 * scale,
              },
              b: {
                fontSize: 12 * scale,
                color: "#FFFFFF",
                padding: [4 * scale, 0, 0, 4],
                fontFamily: "DOUYU",
              },
              c: {
                fontSize: 12 * scale,
                color: "#FFFFFF",
                padding: [4 * scale, 0, 0, 4 * scale],
                fontFamily: "DOUYU",
              },
            },
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: false,
          },
        },
      ],
      series: [
        {
          data: data.value.map(function (value, index) {
            // 为每个数据项创建一个对象，包含值和颜色
            return {
              value: value,
              itemStyle: {
                color: colorList[index % colorList.length], // 使用取模运算确保颜色循环使用
                barBorderRadius: 3,
              },
            };
          }),
          type: "bar",
          barWidth: 6 * scale,
          barCategoryGap: "10%",
          showBackground: true,
          backgroundStyle: {
            color: "#161F3E",
          },
        },
      ],
    };
    const startMoveDataZoom = () => {
      dataZoomMoveTimer = setInterval(() => {
        dataZoomMove.start += 1;
        dataZoomMove.end += 1;
        if (dataZoomMove.end > data.value.length - 1) {
          dataZoomMove.start = 0;
          dataZoomMove.end = 4;
        }
        mutualRecognitionChart.setOption({
          dataZoom: [
            {
              type: "slider", // 有type这个属性，滚动条在最下面，也可以不行，写y：36，这表示距离顶端36px，一般就是在图上面。
              startValue: dataZoomMove.start,
              endValue: dataZoomMove.end,
            },
          ],
        });
      }, 5000);
    };
    startMoveDataZoom();
    let chartDom = document.getElementById("mutual-recognition");
    chartDom.addEventListener("mouseout", () => {
      if (dataZoomMoveTimer) return;
      let dataZoomMove_get = mutualRecognitionChart.getOption().dataZoom[0];
      dataZoomMove.start = dataZoomMove_get.startValue;
      dataZoomMove.end = dataZoomMove_get.endValue;
      startMoveDataZoom();
    });
    chartDom.addEventListener("mouseover", () => {
      clearInterval(dataZoomMoveTimer);
      dataZoomMoveTimer = undefined;
    });
    mutualRecognitionChart.setOption(mutualRecognitionOption);
  }
  initMutualRecognition();

  /**
   * 弹框内日期控件
   */
  const dateRanges = flatpickr("#dateRanges", {
    mode: "range", // 选择日期范围
    dateFormat: "Y-m-d", // 日期格式
    locale: "zh", // 设置语言为中文
    static: true, // 固定日期选择器位置
    maxDate: getToday(), // 设置最大日期为今天，禁止选择今天之后的日期
    defaultDate: [todayDate, todayDate], // 默认选择今天
    onChange: function (selectedDates, dateStr, instance) {
      if (selectedDates.length === 2) {
        // 显示 "YYYY-MM-DD 至 YYYY-MM-DD"
        const startDate = formatDate(selectedDates[0]);
        const endDate = formatDate(selectedDates[1]);
        instance.input.value = startDate + "至" + endDate;
      } else if (selectedDates.length === 1) {
        // 如果只选择了一个日期
        const singleDateStr = formatDate(selectedDates[0]);
        instance.input.value = singleDateStr + "至" + singleDateStr;
      }
    },
  });

  // 页面加载时将 dateRanges 的日期显示设置为 "YYYY-MM-DD 至 YYYY-MM-DD"
  window.addEventListener("load", () => {
    const todayStr = formatDate(todayDate);
    document.getElementById("dateRanges").value = todayStr + "至" + todayStr;
  });

  /**
   * 表格初始化
   */
  function displayTable(page, num) {
    /************************当前mock数据使用，联调时注释，打开下面"联调接口时使用"代码************************/
    if (num == "1") {
      // 插件信息 调用相应接口获取数据
      datas = Array.from({ length: 120 }, (_, i) => ({
        id: i + 1,
        hospital: "黔西南州中医院",
        name: "200",
        idNumber: "100",
        category: "100",
      }));
      total = 120;
    } else if (num == "2") {
      // 检验检查重复预警 调用相应接口获取数据
      datas = Array.from({ length: 140 }, (_, i) => ({
        id: i + 1,
        hospital: "黔西南州中医院",
        name: "陈XX",
        idNumber: "522******0778",
        category: "检查",
        project: i % 2 === 0 ? "尿液分析" : "血细胞分析",
        reportTime: "2024-10-11 15:20:08",
        repeatHospital: "黔西南州人民医院",
        repeatProject: i % 2 === 0 ? "尿液分析" : "血细胞分析",
        repeatReportTime: "2024-10-11 15:20:08",
      }));
      total = 140;
    } else if (num == "3") {
      // 实时互认信息 调用相应接口获取数据
      datas = Array.from({ length: 160 }, (_, i) => ({
        id: i + 1,
        hospital: "黔西南州中医院",
        repeatHospital: "黔西南州人民医院",
        name: "陈XX",
        idNumber: "522******0778",
        category: "检查",
        code: "002503020010000-250302001",
        project: i % 2 === 0 ? "尿液分析" : "血细胞分析",
        reportTime: "2024-10-11 15:20:08",
        repeatReportTime: "2024-10-11 15:20:08",
      }));
      total = 160;
    } else {
    }
    const start = (page - 1) * rowsPerPage;
    const end = start + rowsPerPage;
    /************************当前mock数据使用，联调时注释，打开下面"联调接口时使用"代码************************/

    /*********************************************联调接口时使用*******************************************/
    // const result = "";
    // const response = "";
    // if (num == "1") {
    //   // 插件信息 调用相应接口获取数据；
    //   // 这块接口是分页接口，默认按照每页码15条传值，datas指的是每次请求返回的15条数据对象；
    //   // 参数：如下body中的取值方法
    //   response = fetch("插件信息接口", {
    //     method: "POST",
    //     headers: { "Content-Type": "application/json" },
    //     body: JSON.stringify({
    //       pageNum: page, // 当前页码
    //       pageSize: rowsPerPage, // 一页多少条
    //       date: document.getElementById("dateRanges").value, // 日期
    //       org: document.getElementById("hospital").value, // 医疗机构
    //     }),
    //   });
    //   result = response.json();
    //   datas = result.data; // 每页的数据
    //   total = result.total; // 总条数指的是插件信息弹框当前条件下查询到的所有数据总数，记得接口中返回。
    // } else if (num == "2") {
    //   // 检验检查重复预警 调用相应接口获取数据
    //   // 这块接口是分页接口，默认按照每页码15条传值，datas指的是每次请求返回的15条数据对象；
    //   response = fetch("检验检查重复预警接口", {
    //     method: "POST",
    //     headers: { "Content-Type": "application/json" },
    //     body: JSON.stringify({
    //       pageNum: page, // 当前页码
    //       pageSize: rowsPerPage, // 一页多少条
    //       date: document.getElementById("dateRanges").value, // 日期
    //       org: document.getElementById("hospital").value, // 医疗机构
    //       cate: document.getElementById("category").value, // 类别
    //     }),
    //   });
    //   result = response.json();
    //   datas = result.data; // 每页的数据
    //   total = result.total; // 总条数指的是插件信息弹框当前条件下查询到的所有数据总数，记得接口中返回。
    // } else if (num == "3") {
    //   // 实时互认信息 调用相应接口获取数据
    //   // 这块接口是分页接口，默认按照每页码15条传值，datas指的是每次请求返回的15条数据对象；
    //   response = fetch("实时互认信息接口", {
    //     method: "POST",
    //     headers: { "Content-Type": "application/json" },
    //     body: JSON.stringify({
    //       pageNum: page, // 当前页码
    //       pageSize: rowsPerPage, // 一页多少条
    //       date: document.getElementById("dateRanges").value, // 日期
    //       org: document.getElementById("hospital").value, // 医疗机构
    //       cate: document.getElementById("category").value, // 类别
    //     }),
    //   });
    //   result = response.json();
    //   datas = result.data; // 每页的数据
    //   total = result.total; // 总条数指的是插件信息弹框当前条件下查询到的所有数据总数，记得接口中返回。
    // } else {
    // }
    // const start = 0;
    // const end = datas.length;
    /*********************************************联调接口时使用*******************************************/

    const tableBody = document.getElementById("tableBody");
    tableBody.innerHTML = "";
    if (num == "1") {
      // 插件信息 根据当前接口的字段修改下面字段
      datas.slice(start, end).forEach(row => {
        const tr = document.createElement("tr");
        tr.classList.add("plugInformation");
        tr.innerHTML =
          "<td>" +
          row.id +
          "</td>\n" +
          "<td>" +
          row.hospital +
          "</td>\n" +
          "<td>" +
          row.name +
          "</td>\n" +
          "<td>" +
          row.idNumber +
          "</td>\n" +
          "<td>" +
          row.category +
          "</td>";
        tableBody.appendChild(tr);
      });
    } else if (num == "2") {
      // 检验检查重复预警
      datas.slice(start, end).forEach(row => {
        const tr = document.createElement("tr");
        tr.classList.add("earlyWarning");
        tr.innerHTML =
          "<td>" +
          row.id +
          "</td>\n" +
          "<td>" +
          row.hospital +
          "</td>\n" +
          "<td>" +
          row.name +
          "</td>\n" +
          "<td>" +
          row.idNumber +
          "</td>\n" +
          "<td>" +
          row.category +
          "</td>\n" +
          "<td>" +
          row.project +
          "</td>\n" +
          "<td>" +
          row.reportTime +
          "</td>\n" +
          "<td>" +
          row.repeatHospital +
          "</td>\n" +
          "<td>" +
          row.repeatProject +
          "</td>\n" +
          "<td>" +
          row.repeatReportTime +
          "</td>";
        tableBody.appendChild(tr);
      });
    } else if (num == "3") {
      // 实时互认信息
      datas.slice(start, end).forEach(row => {
        const tr = document.createElement("tr");
        tr.classList.add("mutualRecognitionInformation");
        tr.innerHTML =
          "<td>" +
          row.id +
          "</td>\n" +
          "<td>" +
          row.hospital +
          "</td>\n" +
          "<td>" +
          row.repeatHospital +
          "</td>\n" +
          "<td>" +
          row.name +
          "</td>\n" +
          "<td>" +
          row.idNumber +
          "</td>\n" +
          "<td>" +
          row.category +
          "</td>\n" +
          "<td>" +
          row.code +
          "</td>\n" +
          "<td>" +
          row.project +
          "</td>\n" +
          "<td>" +
          row.reportTime +
          "</td>\n" +
          "<td>" +
          row.repeatReportTime +
          "</td>";
        tableBody.appendChild(tr);
      });
    } else {
    }
    setupPagination();
  }

  /**
   * 分页组件页数控制
   */
  function setupPagination() {
    const pageCount = Math.ceil(total / rowsPerPage);
    document.getElementById("pageNumbers").innerHTML = "";
    if (pageCount <= 7) {
      // 如果页数小于等于7，全部显示
      for (let i = 1; i <= pageCount; i++) {
        appendPageButton(i);
      }
    } else {
      // 当前页码为第一页的情况，显示前6个页码，后面省略号和最后一页
      if (currentPage === 1) {
        for (let i = 1; i <= 5; i++) {
          appendPageButton(i);
        }
        appendEllipsis();
        appendPageButton(pageCount);
      } else if (currentPage <= 4) {
        // 当前页码小于等于4时，显示前5页码 + 省略号 + 最后一页
        for (let i = 1; i <= 5; i++) {
          appendPageButton(i);
        }
        appendEllipsis();
        appendPageButton(pageCount);
      } else if (currentPage > 4 && currentPage <= pageCount - 4) {
        // 当前页码在中间部分时，前后显示省略号
        appendPageButton(1);
        appendEllipsis();
        for (let i = currentPage - 2; i <= currentPage + 2; i++) {
          appendPageButton(i);
        }
        appendEllipsis();
        appendPageButton(pageCount);
      } else {
        // 当前页码靠近最后时，显示最后几页码，前面省略号
        appendPageButton(1);
        appendEllipsis();
        for (let i = pageCount - 4; i <= pageCount; i++) {
          appendPageButton(i);
        }
      }
    }
    document.getElementById("prevPage").disabled = currentPage === 1;
    document.getElementById("nextPage").disabled = currentPage === pageCount;
  }

  /**
   * 分页组件按钮控制
   */
  function appendPageButton(page) {
    const pageButton = document.createElement("button");
    pageButton.textContent = page;
    pageButton.classList.add("page-btn");
    if (page === currentPage) pageButton.classList.add("active");
    pageButton.addEventListener("click", () => {
      currentPage = page;
      displayTable(currentPage, flag);
      setupPagination();
    });
    document.getElementById("pageNumbers").appendChild(pageButton);
  }

  /**
   * 分页组件按钮...显示
   */
  function appendEllipsis() {
    const ellipsis = document.createElement("span");
    ellipsis.textContent = "...";
    ellipsis.classList.add("ellipsis");
    document.getElementById("pageNumbers").appendChild(ellipsis);
  }

  /**
   * 上一页按钮
   */
  document.getElementById("prevPage").addEventListener("click", () => {
    if (currentPage > 1) {
      currentPage--;
      displayTable(currentPage, flag);
      setupPagination();
    }
  });

  /**
   * 下一页按钮
   */
  document.getElementById("nextPage").addEventListener("click", () => {
    const pageCount = Math.ceil(total / rowsPerPage);
    if (currentPage < pageCount) {
      currentPage++;
      displayTable(currentPage, flag);
      setupPagination();
    }
  });

  /**
   * 改变当前显示多少页下拉框监听
   */
  document.getElementById("rowsPerPage").addEventListener("change", e => {
    rowsPerPage = parseInt(e.target.value);
    currentPage = 1; // Reset to first page
    displayTable(currentPage, flag);
    setupPagination();
  });

  /**
   * 跳转xxx页失去焦点触发和按下enter键触发
   */
  document.getElementById("jumpPage").addEventListener("blur", jumpToPage);
  document
    .getElementById("jumpPage")
    .addEventListener("keypress", function (e) {
      if (e.key === "Enter") {
        jumpToPage();
      }
    });

  /**
   * 跳转事件
   */
  function jumpToPage() {
    const jumpPage = parseInt(document.getElementById("jumpPage").value);
    const pageCount = Math.ceil(total / rowsPerPage);
    if (jumpPage >= 1 && jumpPage <= pageCount) {
      currentPage = jumpPage;
      displayTable(currentPage, flag);
      setupPagination();
    }
  }
</script>
